<template>
	<view class="content">
		<!-- <tui-loading v-if="isLoad"></tui-loading> -->
		
		<tui-section
			:title="'发块图册'" 
			:margin="'30rpx 0 0'"
			:size="32"
			is-line 
			background="#fff"></tui-section>
		<view class="list m-t-30">
			<view v-for="(item, index) in blockList" :key="index" class="item">
				<image 
					@click="preview(index, blockList)" 
					@load="imageLoaded(index)"
					:src="baseHttpUrl + item" 
					class="item-image" 
					mode="aspectFill"></image>
			</view>
		</view>
		
		<tui-section
			:title="'头套图册'" 
			:size="32"
			is-line 
			background="#fff"></tui-section>
		<view class="list m-t-30">
			<view v-for="(item, index) in taoList" :key="index" class="item">
				<image 
					@click="preview(index, taoList)" 
					class="item-image" 
					:src="baseHttpUrl + item" 
					mode="aspectFill"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import hairData from '../../common/hair-data.json'
	export default {
		data() {
			return {
				baseHttpUrl: this.ENUM.BASE_URL,
				blockList: [],
				taoList: [],
				loadedImages: 0,
				kNum: 27,
				tNum: 8,
				isLoad: true
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			urlToBase64(src, format) {
			  let img = src;
			  let imgBase64 = wx.getFileSystemManager().readFileSync(img, 'base64');
			  let base64Url = `data:image/${format == 'svg' ? 'svg+xml' : format};base64,${imgBase64}`;
			  return base64Url;
			},
			getData() {
				let arr1 = []
				let arr2 = []
				for (let i = 0; i < this.kNum; i++) {
					arr1.push(`/images/K${i+1}.jpg`)
				}
				for (let j = 0; j < this.tNum; j++) {
					arr2.push(`/images/T${j+1}.jpg`)
				}
				this.blockList = arr1
				this.taoList = arr2
			},
			imageLoaded(index) {
				// this.loadedImages++;
				// if (this.loadedImages === this.blockList.length) {
				// 	// 所有图片都加载完毕的操作
				// 	console.log('所有图片都加载完毕');
				// 	this.isLoad = false
				// }
			},
			preview(index, data) {
				let urls = []
				data.forEach(item => {
					urls.push(this.baseHttpUrl + item)
				})
				uni.previewImage({
					current: index,
					urls,
					indicator: 'number',
					longPressActions: {
						success: function(data) {
							console.log(data)
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
$num-default: 30rpx;
.m-t-30 {
	margin-top: $num-default;
}
.content {
	padding: 0 $num-default $num-default;
}
.list {
	display: flex;
	flex-wrap: wrap;
	margin-right: -$num-default;
	.item {
		display: flex;
		width: calc(50% - 30rpx);
		margin: 0 $num-default $num-default 0;
		&-image {
			width: 100%;
			height: 400rpx;
		}
	}
}
</style>
